<template>
  <div ref="chartRef" class="chart" style="height: '100%'"></div>
</template>
      
<script>
import * as echarts from "echarts";
export default {
  props: {
    option: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    option: {
      deep: true,
      handler() {
        this.initChart();
      },
    },
  },
  mounted() {
    window.addEventListener("resize", this.handleResize);
    this.initChart();
  },

  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    handleResize() {
      if (!this.chart) return;
      this.$nextTick(() => {
        this.chart.resize();
      });
    },
    initChart() {
      this.$nextTick(() => {
        if (this.chart) this.chart.dispose();
        this.chart = echarts.init(this.$refs.chartRef);
        this.chart.setOption(this.option);
      });
    },
  },
};
</script>
      
  <style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
      